<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.tabox {
				margin-left: 40%;
				border: 1px solid black;
				width: 340px;
			}
/* 			.hd{
				background-color: black;
				color: white;
			} */
			.hd ul li {
				padding-left: 25px;
				width: 70px;
				height: 20px;
				float: left;
				display: inline;

			}
			.on{
				background-color: pink;
				width: 70px;
				height: 20px;
			}

			}
		</style>
	</head>
	<body>
		<div class="tabox">
			<div class="hd">
				<ul>
					<li class="on">第一课</li>
					<li class="on1">第二课</li>
					<li class="on2">第三课</li>
				</ul>
			</div>
			<div class="bd">
				<ul class="lh">
					<li>网页特效原理分析</li>
					<li>响应用户操作</li>
					<li>提示框效果</li>
					<li>事件驱动</li>
					<li>元素属性操作</li>
					<li>动手编写一个JS特效</li>
					<li>引入函数</li>
					<li>网页换肤效果</li>
					<li>展开/收缩播放列表效果</li>
				</ul>
				<ul class="lh" style="display: none;">
					<li>网页特效原理分析1</li>
					<li>响应用户操作2</li>
					<li>提示框效果3</li>
					<li>事件驱动4</li>
					<li>元素属性操作5</li>
					<li>动手编写一个JS特效6</li>
					<li>引入函数7</li>
					<li>网页换肤效果8</li>
					<li>展开/收缩播放列表效果9</li>
				</ul>
				<ul class="lh" style="display: none;">
					<li>网页特效原理分析11</li>
					<li>响应用户操作22</li>
					<li>提示框效果33</li>
					<li>事件驱动44</li>
					<li>元素属性操作55</li>
					<li>动手编写一个JS特效66</li>
					<li>引入函数77</li>
					<li>网页换肤效果88</li>
					<li>展开/收缩播放列表效果99</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
			$(function() {
				$(".tabox .hd li").hover(function() {
					$(".tabox .hd li").siblings().removeClass("on");
					$(this).addClass("on");
					$("div ul").siblings().hide();
					$(".lh").eq($(this).index()).show();
				})
			})
		</script>
	</body>
</html>
